<template>
  <div class="city-list" ref="wrapper">
    <div class="content">
      <div class="area">
        <div class="area-header border-topbottom">当前城市</div>
        <div class="area-list">
          <ul class="button-list">
            <li>
              <div class="city-wrap">合肥</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="area">
        <div class="area-header border-topbottom">热门城市</div>
        <div class="area-list">
          <ul class="button-list">
            <li
            v-for="item in hotCities"
            :key="item.id"
            @click="handleChooseCity(item.name)"
            >
              <div class="city-wrap">{{item.name}}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="area"
      v-for="(val, key) in cities"
      :key="key">
        <div class="area-header border-topbottom">{{key}}</div>
        <div class="area-list">
          <ul class="item-list">
            <li class="border-bottom"
            v-for="item in val"
            :key="item.id"
            @click="handleChooseCity(item.name)"
            >
              {{item.name}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'

export default {
  name: 'Clist',
  props: {
    cities: Object,
    hotCities: Array
  },
  data() {
  	return {
  	};
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrapper, {})
    })
  },
  methods: {
    handleChooseCity(name) {
      this.$store.dispatch('changeCityAction', name)
      this.$router.push('/')
    }
  }
};
</script>

<style lang="stylus" scoped>
  .city-list
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
  .area-header
    line-height: 0.54rem
    background: #eee
    padding-left: 0.2rem
    color: #666
    font-size: 0.26rem
  .area-list
    width: 100%
  .button-list
    width: 100%
    padding: .1rem .6rem .1rem .1rem
    overflow: hidden
    li
      width: 33.33%
      text-align: center
      float: left
    .city-wrap
      border: 0.02rem solid #ccc
      padding: .1rem 0
      margin: .1rem
      border-radius: 4px
  .item-list
    li
      line-height: .76rem
      padding-left: .2rem
</style>
